<template>
  <!-- 年审配额页面... -->
  <el-card body-style="min-height: 86vh">
    <!-- 搜索 -->
    <el-form>
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="检测站" label-width="80">
            <el-select
              v-model="searchForm.inspectionId"
              placeholder="请选择检测站"
              style="width: 340px"
              size="large"
            >
              <el-option
                v-for="dict in checkStationList"
                :key="(dict as any).id"
                :label="(dict as any).shortName"
                :value="(dict as any).id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="配额数量" label-width="80">
            <el-input
              v-model="searchForm.num"
              placeholder="请输入配额条数"
              style="width: 340px"
              size="large"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button type="primary" size="large" @click="chongzhi">配额</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-divider />
    <!-- 检测站配额记录列表 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="序号" type="index" width="100" align="center" />
      <el-table-column prop="testStation" label="检测站名称" align="center" />
      <el-table-column prop="num" label="充值条数" align="center" />
      <el-table-column prop="paymentAmount" label="充值金额" align="center" />
      <el-table-column prop="payTime" label="支付时间" align="center" />
    </el-table>
    <!-- 分页 -->
    <el-pagination
      class="flex justify-center mt-2"
      background
      layout="total,prev, pager, next"
      :current-page="currentPage"
      :page-size="limit"
      :total="total"
      @current-change="handleGetTableList"
    />
  </el-card>
</template>

<script lang="ts" setup>
// import { rechargeCost } from '@/api/annualAudit'
import { ref } from "vue";
import { getCheckStationListApi } from "@/api/second";
import { rechargeCost, getAnnualauditFee } from "@/api/annualAudit";
import { useInitTable } from "@/hooks/useCommon";
import { inspect } from "util";

const checkStationList = ref([]);
const searchForm = ref({
  inspectionId: "",
  num: ""
});
/** 获取检测站列表 */
const getCheckStationList = () => {
  // ts-ignore
  getCheckStationListApi({}).then((response: any) => {
    checkStationList.value = response;
  });
};

getCheckStationList();

// 充值功能
const chongzhi = () => {
  // ts-ignore
  rechargeCost(searchForm.value).then((response: any) => {
    // console.log(response);
    if (response) {
      // 刷新列表
      handleGetTableList();
    }
  });
};

// 获取列表数据
const { tableData, currentPage, limit, total, handleGetTableList } = useInitTable({
    searchForm: {
            // current: "",
            // pageSize: "",
            // startTime: "",
            // endTime: "",
            // inspectionId: "",
            pattern:1
        },
  getTableList: getAnnualauditFee
});
console.log('zhix')
handleGetTableList()
</script>

<style></style>
